import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Image} from '@tarojs/components'
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {vcmonitor} from "../../utils/tools";
import {fetchSupport} from "../../utils/getCommonData";
import './tech-support.scss'

export default class TechSupport extends Component {
  state = {
    phone: ''
  }

  async componentDidShow() {
    vcmonitor(this);
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    const ret = await fetchSupport()
    if (ret) {
      this.setState({phone: ret.support_phone})
    }
  }

  makePhoneCall() {
    Taro.makePhoneCall({
      phoneNumber: this.state.phone
    })
  }

  render() {
    return (
      <View className='tech-support' onClick={this.makePhoneCall.bind(this)}>
        <GzhAuth />
        <View className='title-box'>
          <View className='title-top'>我也要做一个一样的</View>
          <View className='title-top'>小程序</View>
        </View>
        <View className='info-box'>
          <View className='title'>技术支持</View>
          <View className='phone'>{this.state.phone || '400-1234-1234'}</View>
        </View>
        <View className='bg'>
          <Image src='http://resource.ivcheng.com/resources/front/img/support-top.gif' mode='scaleToFill'
            className='img'
          />
          <Image src='http://resource.ivcheng.com/resources/front/img/support-bottom.gif' mode='scaleToFill'
            className='img'
          />
        </View>
      </View>
    )
  }
}
